<template>
    <v-app class="app-color">
        <v-content>
            <v-container fluid fill-height grid-list-md>
                <v-card
                    dark
                    color="info"
                    class="mt-3 mx-auto"
                    max-width="300"
                    width="300"
                >
                    <v-sheet
                        style="-webkit-user-select: none;-webkit-app-region: drag;text-align: center;"
                        class="v-sheet--offset mx-auto text-xs-center pa-2"
                        color="warning"
                        elevation="20"
                        max-width="calc(100% - 32px)"
                    >
                        <h1 class="display-1 font-weight-thin pa-3">云印小栈</h1>
                        <v-flex>
                            <v-btn x-small icon>
                                <v-icon>CLOUD PRINT</v-icon>
                            </v-btn>
                            <!-- <v-btn small flat icon>
                                <v-icon>filter_2</v-icon>
                            </v-btn> -->
                        </v-flex>
                    </v-sheet>

                    <v-card-text class="px-4">
                        <v-form
                            ref="form"
                            v-model="valid"
                            lazy-validation
                        >
                            <v-text-field
                                v-model="name"
                                :counter="10"
                                :rules="nameRules"
                                label="账号 ACCOUNT"
                                required
                            />

                            <v-text-field
                                v-model="password"
                                :append-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                                :rules="[passwordRules.required, passwordRules.min]"
                                :type="showPassword ? 'text' : 'password'"
                                name="input-10-1"
                                label="密码 PASSWORD"
                                hint="请谨慎保存密码"
                                counter
                                @keydown="(v) => v.key === 'Enter' && validate()"
                                @click:append="showPassword = !showPassword"
                            />

                            <v-btn
                                block
                                color="warning"
                                class="mt-4 elevation-0"
                                @click="validate"
                                :loading="loadingSubmit"
                            >
                                登 录
                            </v-btn>
                        </v-form>
                    </v-card-text>
                </v-card>

                <!-- 登录错误回调信息提醒 -->
                <v-snackbar
                    v-model="ShowLoginErrMsg"
                    color="error"
                    class="pa-3"
                >
                    {{ loginErrMsg }}
                </v-snackbar>
                <!-- 登录错误回调信息提醒 -->
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
    import { ipcRenderer } from 'electron'
    import { mapMutations } from 'vuex'
    import { login } from '@/api/user'
    import { getStore, setStore } from '@/utils/storage'

    export default {
        data: () => ({
            valid: true,

            // 确认登录按钮加载开关
            loadingSubmit: false,

            // 显示/隐蔽密码
            showPassword: false,

            // 登录错误回调信息提醒配置
            ShowLoginErrMsg: false,
            loginErrMsg: '',

            // 账号
            name: 'junjie',

            // 密码
            password: '989899',

            // 账号表单校验规则
            nameRules: [
                v => !!v || '请输入账号',
                v => (v && v.length <= 10) || '长度不能超过10位'
            ],

            // 密码表单校验规则
            passwordRules: {
                required: value => !!value || '请输入密码',
                min: v => v.length >= 6 || '密码最短不能少于6位',
                emailMatch: () => ('The email and password you entered don\'t match')
            }
        }),
        mounted() {
            console.log('登录页面路由信息：', this.$route)
            this.validate()
        },
        methods: {
            ...mapMutations({
                setToken: 'user/SET_TOKEN'
            }),
            validate() {
                this.loadingSubmit = true
                if (this.$refs.form.validate()) {
                    login({ username: this.name, password: this.password }).then(result => {
                        if(result) {
                            setStore('token', result.token)
                            console.log('发起登录请求成功！')
                            ipcRenderer.send('openWindow')
                        } else {
                            this.loginErrMsg = 'no user was found'
                            this.ShowLoginErrMsg = true
                        }
                        this.loadingSubmit = false
                        this.$refs.form.reset()
                        this.$refs.form.resetValidation()
                    }).catch(err => {
                        this.loginErrMsg = err.message
                        this.loadingSubmit = false
                        this.ShowLoginErrMsg = true
                        this.$refs.form.reset()
                        this.$refs.form.resetValidation()
                    })
                } else {
                    this.loadingSubmit = false
                }
            }
        }
    }
</script>

<style scoped>
    .v-sheet--offset {
        top: -24px;
        position: relative;
    }

    .v-input {
        height: 70px;
    }

    .app-color.theme--light.v-application {
        background: transparent;
    }

    .container {
        padding: 10px;
    }
</style>
